<template>
  <nav :class="navShow ? 'navOn' : 'navOff'">
    <RouterLink to="/">
      <img src="/src/assets/返回.png" alt="">
    </RouterLink>
    <span>{{ film.title }}</span>
  </nav>
  <div class="box">
    <img :src="film.pic">
    <span>{{ film.title }}</span>
  </div>
</template>
<script setup>
import { RouterLink } from 'vue-router'
import { onMounted, ref, watch } from 'vue';
import axios from "@/request"
// 导入路由对象
import { useRoute } from 'vue-router'
const route = useRoute()
const film = ref([])

// 动态加载导航条
const top = ref('')
const navShow = ref(true)

onMounted(() => {
  // 加载时页面固定在顶端
  window.pageYOffset = 0
  document.documentElement.scrollTop = 0
  const title = route.query.title
  axios.get(``).then((res) => {
    if (res.code == 200)
      film.value = res.result;
  })
  // 获取浏览器滚轮
  window.addEventListener('scroll', () => {
    top.value = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
  })

})
// 监听top滚动事件
watch(top, (newValue, oldValue) => {
  if (newValue > 100) {
    if (newValue > oldValue) {
      navShow.value = false
    } else {
      navShow.value = true
    }
  }
})
</script>
<style lang="stylus" scoped>
nav
  height 60px
  width 100vw
  background-color :#652be0
  font-size 24px
  line-height 60px
  color:#fff
  text-align:center
  img
    width 40px 
    float left
    padding-left 20px
    padding-top 10px
  span 
    display:inline-block
    margin 0 auto
    position relative
    right 40px
.navOn {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.5s ease-in-out 0.1s;
    transform: translateZ(0);

}

.navOff {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    opacity:0
    transition: all 0.5s ease-in-out 0.1s;
    transform: translate3d(0, -100%, 0);
}
.box
  width 399px
  height 1000px
  margin 100px auto
  display flex
  justify-content:start
  align-items:center
  flex-direction:column
  font-size:21px
  img
    width 350px
    height 500px
    margin:30px 0
</style>
